<template>
	<view>
		<!-- 搜索框 -->
		<view class="search">
			<v-search @search="gotoSearch"></v-search>
		</view>
		<!-- 分段器 -->
		<view>
			<u-subsection @change="change" :current="current" bgColor="" button-color="#eee" mode="button"
				:animation="true" :list="list">
			</u-subsection>
		</view>
		<!-- 详细信息 -->
		<view class="box">
			<!-- 遍历数据 -->
			<view v-for="(item,index) in goods" :key="item.goods_id" @tap="send(item.goods_id)">
				<!-- 如果价格等于 0 隐藏 -->
				<view class="box-item" v-if="item.goods_price !==0 ">
					<view>
						<u-image :src="item.goods_small_logo" :lazy-load="true" width="100px" height="100px">
							<!-- 加载提示 -->
							<u-loading slot="loading"></u-loading>
							<!-- 加载失败 -->
							<view slot="error" style="font-size: 24rpx;">加载失败</view>
						</u-image>
					</view>
					<view class="item-right">
						<text style="font-size: 24upx;">{{item.goods_name}}</text>
						<br>
						<text style="color: red;">￥{{item.goods_price}}</text>
					</view>
				</view>
			</view>
			<!-- 底部提示 -->
			<u-divider>暂无更多数据</u-divider>
			<u-back-top :scroll-top="scrollTop"></u-back-top>
		</view>
	</view>
</template>

<script>
	import http from '../../utils/http.js'
	import search from '../../components/search/search.vue'
	export default {
		components: {
			'v-search': search
		},
		data() {
			return {
				list: [{
						name: '综合'
					},
					{
						name: '销量'
					},
					{
						name: '价格'
					}
				],
				current: 0,
				goods: [],
				pagesize: 1, //第一页数据,
				id: 0,
				scrollTop: 50
			}
		},
		methods: {
			async message(id, pagesize) {
				const {
					data: res
				} = await http.get(`/api/public/v1/goods/search?query=&cid=${id}&pagenum=${pagesize}&pagesize=10`)
				if (res.meta.status !== 200) return uni.$showMsg
				this.goods = [...this.goods, ...res.message.goods]
				if (res.message.goods == '') return uni.showToast({
					title: '暂无更多数据',
					icon: 'none'
				})
			},
			//跳到搜索页面
			gotoSearch() {
				uni.navigateTo({
					url: '/subpag/search/search'
				})
			},
			change(e) {
				if (e == 0) {
					this.goods.reverse()
				}
				if (e == 1) {
					this.goods.reverse()
				}
			},
			// 跳到商品详情页面
			send(id) {
				uni.navigateTo({
					url: '/subpag/goods_msg/goods_msg?id=' + id
				})
			},

		},
		onLoad(option) {
			this.id = option.id
			this.message(option.id, this.pagesize)
		},
		onReachBottom(e) {
			const pagesize = this.pagesize++
			this.message(this.id, this.pagesize)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style scoped lang="scss">
	.box-item {
		height: 200upx;
		display: flex;
		align-items: center;
		overflow: hidden;
		border-bottom: 1px solid #dadada;

		.item-right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 10px;
		}
		
	}

	.box {
		padding: 0 20upx;
	}

	.search {
		position: sticky;
		top: 0;
		z-index: 999;
	}
</style>
